<template>
  <div class="swiper-container mySwiper group_rank" id="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(items, idex) in groupAry" :key="idex">
        <div class="rank_month_pane">
          <h2 v-if="idex == 0">业务A组</h2>
          <h2 v-if="idex == 1">业务B组</h2>
          <h2 v-if="idex == 2">业务C组</h2>
          <h2 v-if="idex == 3">业务D组</h2>
          <div class="rank_month_caption">
            <div class="rank_month_row">
              <template v-for="(ec, index) in rank_caption">
                <div class="rank_month_cell" :key="index">
                  {{ec}}
                </div>
              <!--/ rank_month_cell -->
              </template>
            </div>
          </div>
          <!-- /rank_month_caption -->
          <div class="rank_box">
            <!-- <content-list :items="items"></content-list> -->
            <div id="swipers" class="swiper-container swipers seamless-warp">
              <div class="swiper-wrapper item">
                <div class="swiper-slide myLi" v-for="(md, index) in items" :key="index">
                  <div v-if="md.ROWNUM === 888888" class="rank_month_list" >
                    <div class="rank_month_list_row">
                      <div class="rank_month_list_cell_6">
                        {{md.USERNAME}}
                      </div>
                    </div>
                  </div>
                  <div v-else class="rank_month_list" >
                    <div class="rank_month_list_row">
                      <div class="rank_month_list_cell">
                        <div class="user_avatar">
                          <span class="img_box">
                            <img :src="/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(md.HEADPHOTOURL) ? md.HEADPHOTOURL : userAvatar" alt="用户头像">
                          </span>
                        </div>
                      </div>
                      <div class="rank_month_list_cell" v-if="md.ROWNUM === 1">
                        <img src="../../assets/Champion.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                      </div>
                      <div class="rank_month_list_cell"  v-else-if="md.ROWNUM === 2">
                        <img src="../../assets/Runnerup.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                      </div>
                      <div class="rank_month_list_cell" v-else-if="md.ROWNUM === 3" >
                        <img src="../../assets/seasonArmy.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                      </div>
                      <div class="rank_month_list_cell" v-else>
                      <span style="display: block;width: 0.38rem;height: 0.5rem;line-height: 0.5rem;font-size: 0.18rem;text-align: center">{{md.ROWNUM}}</span>
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.USERNAME}}
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.DCTZE}}万
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.MBTZE}}万
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.RATE}}%
                      </div>
                    </div>
                  </div>
                </div>
              </div>    
            </div> 
            <!-- <vcrolls :data="items" :class-option="classOptions" class="seamless-warp">
              <ul class="item">
                <li v-for="(md, index) in items" :key="index">
                  <div v-if="md.ROWNUM === 888888" class="rank_month_list" >
                    <div class="rank_month_list_row">
                      <div class="rank_month_list_cell_6">
                        {{md.USERNAME}}
                      </div>
                    </div>
                  </div>
                  <div v-else class="rank_month_list" >
                    <div class="rank_month_list_row">
                      <div class="rank_month_list_cell">
                        <div class="user_avatar">
                          <span class="img_box">
                            <img :src="/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(md.HEADPHOTOURL) ? md.HEADPHOTOURL : userAvatar" alt="用户头像">
                          </span>
                        </div>
                      </div>
                      <div class="rank_month_list_cell" v-if="md.ROWNUM === 1">
                        <img src="../../assets/Champion.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                      </div>
                      <div class="rank_month_list_cell"  v-else-if="md.ROWNUM === 2">
                        <img src="../../assets/Runnerup.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                      </div>
                      <div class="rank_month_list_cell" v-else-if="md.ROWNUM === 3" >
                        <img src="../../assets/seasonArmy.png" alt="userAvatar" style="width: 0.38rem;height:0.5rem">
                      </div>
                      <div class="rank_month_list_cell" v-else>
                      <span style="display: block;width: 0.38rem;height: 0.5rem;line-height: 0.5rem;font-size: 0.18rem;text-align: center">{{md.ROWNUM}}</span>
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.USERNAME}}
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.DCTZE}}万
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.MBTZE}}万
                      </div>
                      <div class="rank_month_list_cell">
                        {{md.RATE}}%
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </vcrolls> -->
          </div>
        </div>
        <!-- /rank_month_pane -->
      </div>
    </div>
  </div>
</template>

<script>
import { fetchToken, fetchRealtimeChartByMonth } from '@tv/api/api';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import vcrolls from 'vue-seamless-scroll';
import ContentList from '@tv/views/pages/ContentList'
export default {
  components: {
    ContentList,
    vcrolls
  },
  data () {
    return {
      msg: '',
      groupAry: [],
      GSwiper: null,
      myswipers: null,
      flag: true,
      userAvatar: require('../../assets/avatar52.png'),
      rank_caption: ['排名头像', '排名', '姓名', '达成额', '目标额', '达成率'],
    }
  },
  computed: {
    classOptions () {
      return {
        step: 1,
        limitMoveNum: 2,
        waitTime: 2000,
        switchDelay: 1000,
        singleHeight: '0.92',
        isSingleRemUnit: true // 是否启用rem度量标准
      }
    }
  },
  mounted () {
    this.handlerToken();
    if (this.flag) {
      this.flag = false
      this.GSwiper = new Swiper('#mySwiper', {
        direction: 'horizontal',
        loop: true,
        autoplay: 16000,
        autoplayDisableOnInteraction: false,
        speed: 500,
        initialSlide: 0,
        slidesPerView: 3,
        slidesPerGroup: 1
      });
    }
  },
  methods: {
    handlerToken () {
      fetchToken().then(res => {
        if (res) {
          this.handlerRealtimeChartByMonth()
        }
      })
    },
    handlerRealtimeChartByMonth () {
      const zidOne = {zuid: 1};
      const zidSecond = {zuid: 2};
      const zidThird = {zuid: 3};
      const zidForth = {zuid: 4};
      let gOne = []
      let gTwo = []
      let gThree = []
      let gFour = []
      this.groupAry = []
      fetchRealtimeChartByMonth(zidOne).then(resp => {
        gOne = resp
        if (resp) {
          fetchRealtimeChartByMonth(zidSecond).then(resg => {
            gTwo = resg
            if (resg) {
              fetchRealtimeChartByMonth(zidThird).then(resh => {
                gThree = resh
                if (resh) {
                  fetchRealtimeChartByMonth(zidForth).then(resi => {
                    gFour = resi
                    this.groupAry.push(gOne)
                    this.groupAry.push(gTwo)
                    this.groupAry.push(gThree)
                    this.groupAry.push(gFour)
                    this.$nextTick(() => {
                      this.GSwiper.update();
                      this.GSwiper.reLoop();
                      this.GSwiper.startAutoplay();
                      this.GSwiper.slideTo(3, 0, false);
                      new Swiper('.swipers', {
                        loop: true,
                        initialSlide: 0,
                        direction: 'vertical',
                        speed: 500,
                        autoplay: 2000,
                        slidesPerView: 3,
                        slidesPerGroup: 1,
                        autoplayDisableOnInteraction: false,
                      });                    
                    })
                  })
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.group_rank{
  width: 15.5rem;
  .rank_month_pane{
    width: auto;
    height: 3.88rem;
    h2{
      margin: 0 0 0.32rem;
      font-size: 0.22rem;
      line-height: 0.23rem;
      color: #75787e;
    }
    .rank_month_caption{
      display: table;
      width: 100%;
      height: auto;
      .rank_month_row{
        display: table-row;
        .rank_month_cell{
          display: table-cell;
          vertical-align: middle;
          font-size: 0.18rem;
          color: #f0f0f0;
          line-height: 1;
          &:first-child{
            width: 0.95rem;
          }
          &:nth-child(2){
            width: 0.82rem;
          }
          &:nth-child(3){
            width: 0.7rem;
          }
          &:nth-child(4){
            width: 0.85rem;
          }
          &:nth-child(5){
            width: 0.8rem;
          }
          &:nth-child(6){
            width: 1.02rem;
          }
        }
      }
    }
    .rank_box{
      margin-top: 0.1rem;
      width: 100%;
      height: 2.89rem;
      overflow: hidden;
      .seamless-warp{
        height: 2.89rem;
        overflow: hidden;
        .item{
          list-style: none;
          padding: 0;
          margin: 0 auto;
          .myLi {
            height: 0.92rem;
            line-height: 0.92rem;
            .rank_month_list{
              padding: 0.1rem 0 0;
              display: table;
              width: 100%;
              height: auto;
              .rank_month_list_row{
                display: table-row;
                width: 100%;
                .rank_month_list_cell_6{
                  display: table-cell;
                  padding-left: 0.1rem;
                  width: 100%;
                  height: 0.92rem;
                  font-size: 0.16rem;
                  line-height: 0.92rem;
                  color: #75787e;
                }
                .rank_month_list_cell {
                  display: table-cell;
                  width:  auto;
                  height: 0.92rem;
                  font-size: 0.16rem;
                  color: #75787e;
                  line-height: 0.92rem;
                  vertical-align: middle;
                  .user_avatar{
                    padding: 0.04rem;
                    width: 0.74rem;
                    height: 0.74rem;
                    border-radius: 0.74rem;
                    -webkit-border-radius: 0.74rem;
                    -moz-border-radius: 0.74rem;
                    background: #282d35;
                    .img_box{
                      display: block;
                      width: 0.66rem;
                      height: 0.66rem;
                      overflow: hidden;
                      border-radius: 0.66rem;
                      -webkit-border-radius: 0.66rem;
                      -moz-border-radius: 0.66rem;
                    }
                  }
                  img{
                    display: block;
                    max-width: 100%;
                    height: auto;
                  }
                  &:first-child{
                    width: 0.95rem;
                  }
                  &:nth-child(2){
                    width: 0.82rem;
                  }
                  &:nth-child(3){
                    width: 0.7rem;
                  }
                  &:nth-child(4){
                    width: 0.85rem;
                  }
                  &:nth-child(5){
                    width: 0.8rem;
                  }
                  &:nth-child(6){
                    width: 1.02rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
